<template>
  <div>
    <App></App>
    <x-header>接口调用</x-header>

    <divider style="margin-top:20px;">今日接口调用排名</divider>
    <v-chart
      ref="demo"
      :data="data">
      <v-bar />
      <v-tooltip :show-item-marker="false" />
    </v-chart>

    <x-button type="primary" plain @click.native="$refs.demo.rerender()">刷新</x-button>

    <divider style="margin-top:20px;">今日接口调用构成</divider>
    <v-chart :data="data2" ref="demo2">
      <v-scale y :options="yOptions" />
      <v-tooltip disabled />
      <v-pie :radius="0.85" series-field="name" />
      <v-legend :options="legendOptions" />
    </v-chart>

    <x-button type="primary" plain @click.native="$refs.demo2.rerender()">刷新</x-button>

  </div>
</template>

<script>
  import { XHeader, Divider, VChart, VLine, VArea, VTooltip, VLegend, VBar, VPie, VScale, XButton } from 'vux'

  const map = {
    '芳华': '40%',
    '妖猫传': '20%',
    '机器之血': '18%',
    '心理罪': '15%',
    '寻梦环游记': '5%',
    '其他': '2%'
  }

  export default {
    components: {
      XHeader,
      Divider,
      VChart,
      VLine,
      VArea,
      VTooltip,
      VLegend,
      VBar,
      VPie,
      VScale,
      XButton
    },
    data () {
      return {
        data: [
          { year: '水利接口', sales: 999 },
          { year: '桥梁接口', sales: 876 },
          { year: '下水道接口', sales: 400 },
          { year: '交通接口', sales: 121 }
        ],
        legendOptions: {
          position: 'right',
          itemFormatter (val) {
            return val + '  ' + map[val]
          }
        },
        yOptions: {
          formatter (val) {
            return val * 100 + '%'
          }
        },
        map,
        data2: [
          { name: '芳华', percent: 0.4, a: '1' },
          { name: '妖猫传', percent: 0.2, a: '1' },
          { name: '机器之血', percent: 0.18, a: '1' },
          { name: '心理罪', percent: 0.15, a: '1' },
          { name: '寻梦环游记', percent: 0.05, a: '1' },
          { name: '其他', percent: 0.02, a: '1' }
        ]
      }
    }
  }
</script>

